<template>
  <div>
    <img src="../assets/login_title.png" alt="图片加载未完成" class="img-responsive" style="padding: 20px"/>
    <div class="loginbg">
        <div class="loginpage">
         <div class="container-fluid">
          <validator name='v'>
         <form role="form">
            <div class="row">
               <div class="col-lg-12">
                  <h4 class="text-center">请输入账号和密码登录</h4>
                  <h5>账号：</h5>
                  <div class="input-group">
                     <span class="input-group-addon">
                        <span class="glyphicon glyphicon-user"></span>
                     </span>
                     <input type="text" class="form-control"  v-model="model.ename">
                  </div>
               </div>

               <div class="col-lg-12">
                  <h5>密码：</h5>
                  <div class="input-group">
                     <span class="input-group-addon">
                        <span class="glyphicon glyphicon-lock"></span>
                     </span>
                     <input type="password" class="form-control"  v-model="model.password" >
                  </div>
               </div>
               <div class="col-lg-12">
                  <!-- <button type="button" class="btn btn-primary">登陆</button> -->
                  <button type="button" v-if='$v.valid' @click="confirm()">登录</button>
               </div>
            </div>
           </form>
           </validator>
        </div>
       </div>
    </div>
    <!-- 加载参数 -->
    <load-data></load-data>
    <h5 class="text-center">版权所有：积成奥枫软件有限公司</h5>
  </div>
</template>

<script>
import co from 'co'
import Vue from 'vue'
import * as Util from './Util'

function findSubcompany (json) {
  let parent = json.parent
  do {
    if (parent.name.endsWith('分公司')) {
      console.log('发现子公司：' + parent.name)
      return parent.name
    }
    parent = parent.parent
  } while (parent)
  console.log('发现公司异常')
  return ''
}

let saveGen = function * (self) {
  // 调用远程登录服务，获取所有有权访问的功能
  let path = `/rs/user/${self.model.ename}/${self.model.password}/安检系统`
  let ret = yield self.$http({url: path, method: 'GET'})

  Vue.f_subcompany = findSubcompany(ret.data)

  // 处理返回数据中的functions部分，加上size，以满足树的结构要求

  self.functions = Util.f = ret.data
  self.$goto('home-page', {functions: ret.data})
}

export default {
  title: '登录',
  data () {
    return {
      model: {},
      functions: {}
    }
  },
  methods: {
    confirm () {
      let gen = saveGen(this)
      return co(gen)
    }
  }
}
</script>

<style>
  .logintitle { width:30%; height:80px; margin:30px auto; margin-left: 50px}
  div.loginpage { padding:100px 0px 0px 300px;}
  div.loginpage div.container-fluid{ width:360px; height:300px; background-i:#FFFFFF; border-radius:10px; border: solid 1px #d6d6d6; padding:15px;}
  div.loginpage div.container-fluid button{ width:100%; margin:20px 0px 0px 0px; height:40px; font-size:16px;}
  div.loginpage div.container-fluid input[type=text]{ background:#FFFFFF; border: solid 1px #d6d6d6;}
  div.loginpage div.container-fluid input[type=text]:hover{ background:#FFFFFF; border: solid 1px #66afe9;}
</style>
